
import React from 'react';

import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';
import Home from './../container/home/home';
import Mode from './../container/Mode/Mode';
import Inherit from "../container/Inherit/Inherit";
import Inherits from '../container/Inherits/Inherits';
import FunExpress from '../container/FunExpress/FunExpress';
import Closure from '../container/Closure/Closure';


const Routers = [
    {
        path: '/',
        exact: true,
        slideBar: ()=> <Home />,
        main: ()=> (<h2>Home</h2>)
    },{
        path: '/mode',
        slideBar: ()=> <Mode/>,
        main: ()=> (<h2>Mode</h2>)
    },{
        path: '/theme',
        slideBar: ()=> (<div>Theme</div>),
        main: ()=> (<h2>Theme</h2>)
    },{
        path: '/inherit',
        sildebar: ()=> <Inherit/>,
        main:()=>(<h2>Inherit</h2>)
    },{
        path: '/inherit1',
        sildebar: ()=> <Inherits/>,
        main: ()=> (<h2>Inherits</h2>)
    },{
        path: '/funExpress',
        sildebar: ()=> <FunExpress />,
        main: ()=> <FunExpress />
    },{
        path:'/closure',
        sildebar: ()=> (<h2>闭包</h2>),
        main:()=><Closure/>
    }
]

const SlideBar = ()=> (
    <Router>
        <div style={{ display: 'flex' }}>
            <div>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/mode'>Mode</Link></li>
                    <li><Link to='/theme'>Theme</Link></li>
                    <li><Link to='/inherit'>Inherit</Link></li>
                    <li><Link to='/inherits'>Inherits</Link></li>
                    <li><Link to='/funExpress'>FunExpress</Link></li>
                    <li><Link to='/closure'>Closure</Link></li>
                </ul>
            </div>
            <div style={{ flex: 1 }}>
                {
                    Routers.map((item,index)=> (
                        <Route
                            key={ index }
                            path={ item.path }
                            exact={ item.exact }
                            component= { item.main }
                        />
                    ))
                }
            </div>
        </div>
    </Router>
)

export default SlideBar;